<template>
	<div class="container">
		<navigationBar title=" "></navigationBar>
		<div class="content" :style="'padding-top: ' + (navigationBarHeight-1) + 'px;'">
			<div class="head-local">
				<div class="left">当前定位</div>
				<div class="right"><image src="../../static/icon/location.png" mode=""></image>{{countyName}}</div>
			</div>
			<div class="head-local">切换定位</div>
			<div class="tab-wrap" :style="'top: ' + (navigationBarHeight+80) + 'px;'">
				<div class="tabs">
					<scroll-view scroll-y scroll-with-animation style="height: 100%; overflow: hidden" :scroll-top="scrollTop">
						<div class="tabs-item" v-for="(item, index) in cityList" :key="index" :class="{ active: index == cityCurrent }" @click="cityChooseItem(item,index)">
							{{ item.name }}
						</div>
					</scroll-view>
				</div>
				<div class="tabs-container">
					<scroll-view scroll-y scroll-with-animation style="height: 100%; overflow: hidden" :scroll-top="scrollTop">
						<div class="item-btn" v-for="(item, index) in areaList" :key="index" :class="{ active: item.county_id == countyId }" @click="areaChooseItem(item,index)">
							{{item.name}}
						</div>
						
					</scroll-view>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import data from '@/js/my/locationList/data.js';
import methods from '@/js/my/locationList/methods.js';
import { mapState } from 'vuex';
import navigationBar from '../../components/navigationBar.vue';
export default {
	data,
	methods,
	onLoad() {
		this.getCity()
	},
	onShow() {},
	onHide() {},
	components: {
		navigationBar
	},
	computed: {
		...mapState(['navigationBarHeight','userInfo'])
	}
};
</script>
<style>
	page{background-Color:#FFFFFF;}
	uni-page{background-Color:#FFFFFF;}
</style>
<style scoped lang="scss">
@import '~@/style/my/locationList.scss';
</style>
